<template>
  <div class="column container">
    <div class="row full-width q-my-md">
      <div class="title">My Videos</div>
    </div>
    <q-table
      v-model:selected="selected"
      v-model:pagination="pagination"
      selection="multiple"
      :columns="columns"
      :rows="myVideos"
      :loading="isLoading"
      @request="onRequest"
    >
      <template v-slot:body-cell-video="{ value, row, rowIndex }">
        <q-td
          class="cover-container"
          auto-width
          @mouseover="onItemOver($event, row, rowIndex)"
        >
          <q-img
            class="cover-image"
            style="width: 166px; height: 100%"
            :src="value"
            :ratio="16 / 9"
            @click="onItemClick($event, row, rowIndex)"
          >
            <div
              class="absolute-full text-subtitle2 flex flex-center no-pointer-events"
              v-if="onOver && onOverIndex === rowIndex"
            >
              <q-btn
                flat
                icon="mdi-open-in-new"
                padding="none"
                style="font-size: 18px"
              />
            </div>
          </q-img>
          <div class="duration-label">{{ row.durationLabel }}</div>
        </q-td>
      </template>
      <template v-slot:body-cell-description="{ row, rowIndex }">
        <q-td
          class="table-row"
          auto-width
          @mouseover="onItemOver($event, row, rowIndex)"
        >
          <div
            class="row no-wrap full-width justify-around"
            v-if="onOver && onOverIndex === rowIndex"
          >
            <q-btn
              flat
              icon="mdi-alert-circle-outline"
              padding="none"
              style="font-size: 18px"
              @click="showDetail(row)"
            >
              <q-tooltip style="padding: 3px 5px !important"
                >More Info</q-tooltip
              >
            </q-btn>
            <q-btn
              flat
              icon="mdi-pencil"
              padding="none"
              style="font-size: 18px"
              @click="editVideo(row)"
            >
              <q-tooltip style="padding: 3px 5px !important">Edit</q-tooltip>
            </q-btn>
            <q-btn
              flat
              icon="mdi-playlist-plus"
              padding="none"
              style="font-size: 18px"
            >
              <q-tooltip style="padding: 3px 5px !important"
                >Add to Playlist</q-tooltip
              >
            </q-btn>
            <q-btn
              flat
              icon="mdi-share-variant"
              padding="none"
              style="font-size: 18px"
            >
              <q-tooltip style="padding: 3px 5px !important">Share</q-tooltip>
            </q-btn>
            <q-btn
              flat
              :icon="row.isPinned ? 'mdi-pin-off' : 'mdi-pin'"
              padding="none"
              style="font-size: 18px"
            >
              <q-tooltip style="padding: 3px 5px !important">{{
                row.isPinned ? 'Unpin' : 'Pin to Shortcut'
              }}</q-tooltip>
            </q-btn>
            <q-btn
              flat
              icon="mdi-dots-vertical"
              padding="none"
              style="font-size: 18px"
            >
              <q-tooltip style="padding: 3px 5px !important">More</q-tooltip>
              <q-menu anchor="bottom middle" self="top middle" auto-close>
                <q-list dense>
                  <q-item clickable>
                    <q-item-section class="menu-section" avatar>
                      <q-icon name="mdi-record-circle-outline" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Edit In Studio</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section class="menu-section" avatar>
                      <q-icon name="mdi-chart-box" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Analytics</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section class="menu-section" avatar>
                      <q-icon name="mdi-download" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Download</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section class="menu-section" avatar>
                      <q-icon name="mdi-delete" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Delete Forever</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
          <div class="video-info column justify-center items-center" v-else>
            <div class="video-title one-line-text">{{ row.title }}</div>
            <div class="video-description three-line-text">
              {{ row.description }}
            </div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-status="{ value }">
        <q-td auto-width>
          <video-status-icon :status="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-compliments="{ value }">
        <q-td auto-width>
          <v-icon-num icon="mdi-podium" :label="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-audios="{ value }">
        <q-td auto-width>
          <v-icon-num icon="img:/icons/video-info-record.svg" :label="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-likes="{ row }">
        <q-td auto-width>
          <div class="column">
            <div style="text-align: right">{{ row.likePercent }}%</div>
            <q-linear-progress
              class="q-my-xs"
              :value="row.likePercent / 100"
              color="white"
            />
            <div class="row text-sub items-center justify-between">
              <div class="row">
                <q-icon class="icon q-mr-xs" name="mdi-thumb-up" />
                <div>{{ row.likeCount }}</div>
              </div>
              <div class="row">
                <q-icon class="icon q-mr-xs" name="mdi-thumb-down" />
                <div>{{ row.dislikeCount }}</div>
              </div>
            </div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-original="{ row }">
        <q-td auto-width>
          <div class="row" style="width: 100px">
            <q-avatar size="40px">
              <img :src="row.creatorAvatar" />
            </q-avatar>
            <div class="column">
              <q-chip square size="10px" style="color: #b7b7b7; margin: 0"
                >English</q-chip
              >
              <h-icon-num icon="mdi-star" label="0" />
            </div>
          </div>
        </q-td>
      </template>
    </q-table>
    <q-dialog
      v-model="isEditVideoDialog"
      v-if="currentVideo"
      transition-show="fade"
      transition-hide="fade"
      :maximized="isDialogMaximized"
      persistent
    >
      <InfoBox
        :video="currentVideo"
        :maxmized="isDialogMaximized"
        @maximize="isDialogMaximized = !isDialogMaximized"
        @close="isEditVideoDialog = false"
      />
    </q-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import Video from 'src/models/Video';
import VideoStatusIcon from 'components/video/VideoStatusIcon.vue';
import VIconNum from 'components/utils/VIconNum.vue';
import HIconNum from 'components/utils/HIconNum.vue';
import InfoBox from 'components/uploader/videouploader/InfoBox.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
import { storeToRefs } from 'pinia';

export default defineComponent({
  components: {
    VideoStatusIcon,
    VIconNum,
    HIconNum,
    InfoBox,
  },
  setup() {
    const columns = ref<any[]>([
      {
        name: 'video',
        label: 'Video',
        field: 'coverImage',
        align: 'left',
      },
      {
        name: 'description',
        label: 'Description',
        field: 'description',
        align: 'left',
      },
      { name: 'status', label: 'Status', field: 'status', align: 'center' },
      { name: 'views', label: 'Views', field: 'viewCount' },
      {
        name: 'compliments',
        label: 'Compliments',
        field: 'complimentsCount',
        align: 'center',
      },
      {
        name: 'audios',
        label: 'Linked Audio',
        field: 'audioCount',
        align: 'center',
      },
      { name: 'original', label: 'Original Audio', align: 'center' },
      { name: 'likes', label: 'Likes(vs.dislikes)', align: 'center' },
      {
        name: 'date',
        label: 'Date',
        field: 'createTimeLabel',
        align: 'center',
      },
    ]);
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const $q = useQuasar();
    const router = useRouter();
    const { myVideos, myVideosPage } = storeToRefs(userStore);
    const pagination = ref<any>({
      page: 0,
      rowsPerPage: 10,
      rowsNumber: 0,
    });
    const isLoading = ref(false);
    const selected = ref([]);
    const onOver = ref(false);
    const onOverIndex = ref();
    const isEditVideoDialog = ref(false);
    const isDialogMaximized = ref(false);
    const isDialogMinimize = ref(false);
    const currentVideo = ref<Video>();
    onBeforeMount(async () => {
      await onRequest();
    });
    const onRequest = async (prop: any = null) => {
      isLoading.value = true;
      let params = {
        page: pagination.value.page,
        size: pagination.value.rowsPerPage,
      };
      if (prop) {
        params = {
          page: prop.pagination.page,
          size: prop.pagination.rowsPerPage,
        };
      }
      await userStore.getMyVideos(params);
      if (myVideosPage && myVideosPage.value) {
        pagination.value = {
          page: myVideosPage.value.page,
          rowsPerPage: myVideosPage.value.size,
          rowsNumber: myVideosPage.value.total,
        };
      }
      isLoading.value = false;
    };
    const onItemOver = (event: any, row: Video, index: number) => {
      onOver.value = true;
      onOverIndex.value = index;
    };
    function showDetail(item: Video) {
      globalStore.setMyContentsRightDrawer(item);
    }
    function editVideo(item: Video) {
      isEditVideoDialog.value = true;
      currentVideo.value = item;
    }
    return {
      columns,
      myVideos,
      currentVideo,
      myVideosPage,
      pagination,
      isLoading,
      selected,
      onOver,
      onOverIndex,
      isEditVideoDialog,
      isDialogMaximized,
      isDialogMinimize,
      onRequest,
      onItemOver,
      onItemClick(event: any, row: Video, index: number) {
        router.push({ name: 'Video', params: { id: row.id } });
      },
      showDetail,
      editVideo,
    };
  },
});
</script>
<style lang="scss" scoped>
$description-width: 244px;
.menu-section {
  min-width: 22px !important;
}
.title {
  font-size: 22px;
}
.cover-container {
  position: relative;

  .cover-image {
    div {
      z-index: 2;
    }
  }
  .duration-label {
    position: absolute;
    right: 20px;
    bottom: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 1;
  }
}
.text-sub {
  color: $sub;
  font-size: 12px;
  .icon {
    font-size: 16px;
  }
}
.video-info {
  width: $description-width;
  max-width: $description-width;

  .video-title {
    width: $description-width;
    font-size: 14px;
    font-weight: bold;
  }
  .video-description {
    width: $description-width;
    height: 60px;
    font-size: 12px;
    color: $sub;
  }
}
</style>
